<template>
  <div class="about">
    <h3>About -- {{ num }}</h3>
    <h4>
      {{ count }}
    </h4>
    {{ list }}
    <h2>
      {{ newNum }}
    </h2>
    <button @click="addNum">+++</button>
    <button @click="init">异步</button>
  </div>
</template>

<script>
// vuex辅助函数
// mapState  映射vuex中的state
// mapGetters   映射vuex中的getters
// mapMutations   映射vuex中的mutations
// mapActions   映射vuex中的actions
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'About',
  computed: {
    ...mapState(['num', 'count', 'list']),
    ...mapGetters(['newNum'])
  },
  created() {
      console.log(this.$store)
  },
  methods: {
      ...mapMutations(['addNum']),
      ...mapActions(['init'])
  }
}
</script>
